<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-ayi fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>C端-人才</el-breadcrumb-item>
			<el-breadcrumb-item>上岗时段列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<!-- <el-col :span="2">
                        <el-button type="success" class="fl" @click="allUser()" round size="mini">全部</el-button>
                    </el-col> -->
					<el-col :span="4">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_80">
								<el-input v-model="s_name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-input v-model="s_tel" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="s_is_set" placeholder="设置类别">
									<el-option label="接活设置" value="2"></el-option>
									<el-option label="日程确认" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="s_task_hours_start" placeholder="派工状态">
									<el-option label="已派工" value="1"></el-option>
									<el-option label="未派工" value="2"></el-option>
								</el-select>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.city_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item class="w_100">
								<el-select v-model="s_type" placeholder="岗位">
									<el-option
										v-for="item in TypeArr"
										:key="item.id"
										:label="item.label_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item> -->
							<el-form-item class="mt">
								<el-cascader
									v-model="s_type"
									:options="TypeArr"
									:props="optionProps"
									placeholder="请选择岗位"
									@change="changeBtndialogtype"
									clearable></el-cascader>
							</el-form-item>
							<el-form-item class="w_140">
								<el-select v-model="s_time_slot" multiple collapse-tags placeholder="可上岗时段（可多选）">
									<el-option label="早班" value="1">早班</el-option>
									<el-option label="中班" value="2">中班</el-option>
									<el-option label="晚班" value="3">晚班</el-option>
									<el-option label="夜班" value="4">夜班</el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_90">
								<el-select v-model="s_ry_status" placeholder="人员状态">
									<el-option label="上线" value="1">上线</el-option>
									<el-option label="下线" value="2">下线</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									placeholder="开始日期"
									v-model="date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									placeholder="结束日期"
									v-model="date2"
								></el-date-picker>
							</el-form-item>

							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="renList" stripe>
						<el-table-column prop="name" label="姓名" width="110px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="toPersonnelListHx(row)">{{ row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop label="手机号" width="140">
							<template slot-scope="{ row }">
								<span>{{ row.mobile | vf_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="gender" label="性别" width="60" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.gender == 'male'">男</span>
								<span v-if="row.gender == 'female'">女</span>
								<span v-if="row.gender == 'other'">未知</span>
							</template>
						</el-table-column>
						<el-table-column prop label="年龄" width="100">
							<template slot-scope="{ row }">
								<span>{{ row.age }}岁</span>
							</template>
						</el-table-column>
						<el-table-column prop="work_status" label="人员状态" width="90" align="center">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.work_status == '1'">上线</span>
								<span class="text-danger" v-if="row.work_status == '2'">下线</span>
							</template>
						</el-table-column>
						<el-table-column prop label="日期" width="100">
							<template slot-scope="{ row }">
								<span>{{ row.work_date }}</span>
							</template>
						</el-table-column>
						<el-table-column prop label="设置类别" width="100">
							<template slot-scope="{ row }">
								<span v-if="row.is_set == 2">接活设置</span>
								<span v-if="row.is_set == 1" class="text-success">日程确认</span>
							</template>
						</el-table-column>
						<el-table-column prop label="可上岗时段" width="180">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.job_shift != ''">{{ row.job_shift }}</span>
								<span class="text-success" v-if="row.job_shift == ''">全天休息</span>
							</template>
						</el-table-column>
						<el-table-column prop="job_times" label="可上岗时间" width="120">
							<!-- <template slot-scope="{row,$index}">
                                <span v-if="row.job_times!=''">{{row.job_times}}</span>
                                <span v-if="row.job_times==''">全天休息</span>
                            </template> -->
							<template slot-scope="{ row }">
								<span v-if="row.job_times_arr.length != 0">
									<span v-for="(item, index) in row.job_times_arr" :key="index" style="display: block;">{{
										item
									}}</span>
								</span>
								<span v-if="row.job_times_arr.length == 0">全天休息</span>
							</template>
						</el-table-column>
						<el-table-column prop="is_over" label="派工状态" width="70">
							<template slot-scope="{ row }">
								<span v-if="row.task_hours > 0" class="text-success">已派工</span>
								<span v-if="row.task_hours <= 0" class="text-danger">未派工</span>
							</template>
						</el-table-column>
						<el-table-column prop="job_types" label="岗位" width="130"></el-table-column>
						<el-table-column prop="job_areas" label="商圈" min-width="200"></el-table-column>
						<!-- <el-table-column prop="job_shift" label="班次">
							<template slot-scope="{row,$index}">
								 <span :class="row.is_set==1?'text-success':''">{{row.job_shift}}</span>
								 <span v-if="row.is_set==1" class="text-success">（日程）</span>
								 <span v-if="row.is_set==2">（偏好）</span>
							</template>
                        </el-table-column>-->
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchIndustryJob } from '@/api/label.js'
export default {
	name: 'personnelList',
	data() {
		return {
			id: '',
			url: common.url,
			renList: [], //数据集合
			total: 0, //总数量
			pageNum: 1, //当前页
			pageSizeNow: 20,
			cityList: [], // 城市列表
			city_val: '',
			city_id: '',
			s_name: '', //姓名
			s_tel: '', //手机号
			date1: '', //类型时间
			date2: '', //类型时间
			s_type: '', //岗位
			s_time_slot: ['1', '2', '3', '4'], //上岗时段
			s_ry_status: '1', //人员状态
			s_is_set: '', //日程 [1]设置 [2]未设置 [3]不限 默认[3]
			s_task_hours_start: '',
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			TypeArr: [], //任务类别
			areaList: [], //区域列表
			areaStatus: true,
			agent_id: '',
			agent_reset: 0,
			optionProps:{
				value: 'id',
				label: 'label_name'
			}
		}
	},
	computed: {
		// city_value() {
		// 	return this.city_val
		// }
	},
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listUser()
		}
		// 城市改变
		// city_value(newVal, oldVal) {
		// if (oldVal) {
		// 	let [id, name] = oldVal.split('|')
		// 	if (id === '北京') {
		// 		id = 1
		// 	}
		// 	// 存储旧的商圈数据
		// 	this.selectedAreasMap[`city-${id}`] = this.area_arr
		// }
		// console.log('存储值', this.selectedAreasMap)
		// if (newVal && this.city_id) {
		// 	this.listArea(this.city_id) //商圈列表
		// }
		// }
	},
	created() {
		if (this.$route.query.id) {
			this.s_name = this.$route.query.id //接收传参
		} else {
			this.s_name = '' //接收传参
		}
		//时间的默认选中
		var d = this.date(0)
		this.date1 = d
		this.date2 = d
		// this.selectedAreasMap = {}
	},
	mounted() {},
	methods: {
		setValue(data) {
			console.log(data)
			this.agent_id = data.agent_id

			this.cityList = data.city_list
			if (this.cityList.length > 0) {
				this.city_val = this.cityList[0].name
				this.city_id = this.cityList[0].id
				this.listArea(this.city_id) //商圈列表
				this.alljob_type()
			}
		},
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		// 监听城市val变化
		changeCity() {
			if (!this.city_val) return
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.listArea(this.city_id)
			this.alljob_type();
		},
		allskill() {
			let fn = new FormData()
			fn.append('label_type', 'job_type')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.TypeArr = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		listUser() {
			//获取用户列表
			// return;
			let fn = new FormData()
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			if (this.$route.query.staff_sn) {
				fn.append('staff_sn', this.$route.query.staff_sn)
			}
			fn.append('name', this.s_name)
			fn.append('mobile', this.s_tel)
			fn.append('is_set', this.s_is_set)
			if (this.s_task_hours_start == 1) {
				fn.append('task_hours_start', 1)
			} else if (+this.s_task_hours_start == 2) {
				fn.append('task_hours_end', 1)
			}
			fn.append('city_id', this.city_id)
			fn.append('job_areas', '' + s_departmentIds_Arr)
			fn.append('job_types', this.s_type)
			fn.append('time_slot', this.s_time_slot.toString())
			fn.append('work_status', this.s_ry_status)
			fn.append('agent_id', this.agent_id)

			if (this.date1 == null) {
				this.date1 = ''
			}
			fn.append('work_date_start', this.date1)
			if (this.date2 == null) {
				this.date2 = ''
			}
			fn.append('work_date_end', this.date2)

			this.$http.post(this.url + '/schedule/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							var job_times_arr = res.data.data.list
							job_times_arr.forEach(element => {
								if (element.job_times != '') {
									element.job_times_arr = element.job_times.split(',')
								} else {
									element.job_times_arr = []
								}
							})
							this.renList = job_times_arr
							this.total = res.data.data.count
						} else {
							this.renList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			//判断时间框是否存在值
			if (this.date1 == null || this.date1 == '') {
				this.$message.error('请选择开始时间！')
				return
			}
			if (this.date2 == null || this.date2 == '') {
				this.$message.error('请选择结束时间！')
				return
			}
			this.pageNum = 1
			this.listUser()
		},

		//跳转人才画像
		toPersonnelListHx(row) {
			const { href } = this.$router.resolve({ path: '/personnelListHx', query: { id: row.staff_id } })
			window.open(href, '_blank')
		},

		async resetBtn() {
			//全部
			await this.resetData() //重置请求数据
			this.listUser()
		},

		async resetData() {
			//重置请求数据
			this.pageNum = 1
			this.s_name = '' //姓名
			this.s_tel = '' //手机号
			this.s_type = '' //岗位
			this.s_time_slot = ['1', '2', '3', '4'] //上岗时段
			this.s_is_set = '' //日程 [1]设置 [2]未设置 [3]不限 默认[3]
			this.s_task_hours_start = ''
			this.area_name = ''
			this.s_ry_status = '1' //人员状态

			// 重置代理商
			this.agent_reset += 1
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listUser()
		},

		downloadOrder() {
			//上岗时段列表-导出
			if (this.date1 == null) {
				this.date1 = ''
			}
			if (this.date2 == null) {
				this.date2 = ''
			}
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				name: this.s_name,
				mobile: this.s_tel,
				is_set: this.s_is_set,
				job_areas: '' + s_departmentIds_Arr,
				city_id: this.city_id,
				job_types: this.s_type,
				time_slot: this.s_time_slot.toString(),
				work_status: this.s_ry_status,
				work_date_start: this.date1,
				work_date_end: this.date2,
				agent_id: this.agent_id
			}

			let new_obj
			if (+this.s_task_hours_start == 1) {
				new_obj = {
					...obj,
					task_hours_start: 1
				}
			} else if (+this.s_task_hours_start == 2) {
				new_obj = {
					...obj,
					task_hours_end: 1
				}
			} else {
				new_obj = {
					...obj
				}
			}
			let param = $.param(new_obj)
			window.location.href = this.url + '/schedule/exportList?' + param
		},
		//获取商圈列表
		listArea(city_id) {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', city_id)
			fn.append('agent_id', this.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							// if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
							// 	this.area_arr = this.selectedAreasMap[`city-${city_id}`]
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.area_arr = arr
			} else {
				this.area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},
		//获取岗位
		async alljob_type() {
			this.s_type = ''
			try {
        		let ret = await fetchIndustryJob({
					city_id: this.city_id
				})
				if(ret.length>0){
					this.TypeArr = ret
				}else{
					this.TypeArr = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		// 选择岗位
		changeBtndialogtype() {
			// let [id, name] = this.type_arr.split('|') // es6 数组解构赋值
			this.s_type = this.s_type[1]
			//this.label_name = name
		},
	}
}
</script>

<style scoped>
.search_box {
	width: 778px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
.s_submit {
	right: -1px;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}
.mt{
	margin-top: -5px;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelDateEdit.vue